<template>
     <el-dialog :title="title" :data="visible" :visible.sync="visible" :show-close="false" width="550px" :modal="true"
                :close-on-click-modal="false"  :close-on-press-escape="false"  top="50px" style="margin-bottom:20px">
       <!-- 这里的:show-close="false"是设置不显示关闭按钮，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误 -->
        <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal"><i class="el-dialog__close el-icon el-icon-close"></i></button>
        <el-form :model="propsData"  :rules="rules" ref="propsData" label-width="100px">
          <el-form-item label="设备组" prop="group_id">
              <el-select v-model="propsData.group_id"  placeholder="选择设备组" style="width: 90%;">
                <el-option v-for="(item, index) in groupOptions" :key='index' :label="item.name" :value='item.id'></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="propsData.name" type="text" placeholder="请输入设备名称" style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="device_id" prop="device_id">
            <el-input v-model="propsData.device_id" type="text" placeholder="请输入设备名称ID" style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="api_key" prop="api_key">
            <el-input v-model="propsData.api_key" type="text" placeholder="请输入接入KEY"  style="width: 90%;"></el-input>
          </el-form-item>
           <el-form-item label="备注">
            <el-input v-model="propsData.remark" type="text" placeholder="请输入备注"  style="width: 90%;"></el-input>
          </el-form-item>
          <el-form-item label="分配类型">
              <el-radio-group v-model="agent_unit">
                <el-radio label="3">暂不分配</el-radio>
                <el-radio label="1">营业点</el-radio>
                <el-radio label="2">商家</el-radio>
              </el-radio-group>
          </el-form-item>
            <el-form-item v-show="agent_unit==1" label="分配站点">
              <el-select v-model="selectOutlet" placeholder="分配站点" value-key="id"  multiple reserve-keyword :loading="unitsloading"  style="width: 90%;" filterable>
                <el-option v-for="option in unitOptions" :key="option.id"  :label="option.hotel_name"  :value="option"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-show='agent_unit==2' label="分配商家">
              <el-select v-model="propsData.agent_id" placeholder="请选择分配商家" filterable style="width: 90%;">
                <el-option v-for="option in sellerOptions" :key="option.id"  :label="option.mobile"  :value="option.id"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label-width="100px" label="状态" size="mini">
            <el-switch  active-color="#13ce66" inactive-color="#ff4949"  
                    active-value="1"  inactive-value="2"
                    active-text="启用" inactive-text="禁止" 
                    v-model="propsData.status">
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" :loading="loading"  @click="submitForm">保 存</el-button>
        </div>
      </el-dialog>
</template>


<script>
import * as api from '@/api/main-api' // API
export default {

  name: 'editDevice',

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    propsData: Object
  },

  data() {
    return {
      unitOptions: [],
      sellerOptions: [],
      groupOptions: [],
      selectOutlet: [],
      unitsloading: false,
      loading: false,
      agent_unit: '3',
      title: '设备编辑',
      rules: {
        device_id: [
          { required: true, message: '设备ID必填', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '格式错误' }
        ],
        name: [
          { required: true, message: '设备名称必填', trigger: 'blur' },
          { pattern: /^[0-9\w\u4E00-\u9FA5\uF900-\uFA2D]*$/, message: '格式错误' }
        ],
        api_key: [
          { required: true, message: 'KEY必填', trigger: 'blur' }
        ],
        group_id: [
          { required: true, message: '归属组必填', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    // 编辑头信息
    setTitle(v) {
      this.title = v
    },

    // 关闭弹窗，触发父组件修改visible值
    cancelModal() {
      this.$emit('update:visible', false)
    },

    // 表单提交
    submitForm() {
      // 数据赋值
      var postData = {
        api_key: this.propsData.api_key,
        device_id: this.propsData.device_id,
        name: this.propsData.name,
        remark: this.propsData.remark,
        group_id: this.propsData.group_id,
        status: this.propsData.status,
        // unit_id: this.propsData.unit_id,
        agent_id: this.propsData.agent_id,
        agent_unit: this.agent_unit,
        id: this.propsData.id
      }
      // 多选
      var outlet = this.selectOutlet
      if (outlet !== 'undefined' && outlet.length > 0) {
        // 这里整理数据
        var myids = []
        for (var i in outlet) { // 遍历json数组时，这么写p为索引，0,1
          myids.push(outlet[i].id)
        }
        postData.unit_id = myids.join(',')
      } else {
        postData.unit_id = '0'
      }
      // 数据开始提交
      this.$refs.propsData.validate(valid => {
        if (valid) {
          this.loading = true
          if (typeof (postData.id) === 'undefined') {
            this.postAddUrl(postData)
          } else {
            this.postEditdUrl(postData)
          }
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // add-提交数据
    postAddUrl(data) {
      api.addDeviceApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    },

    // edit-提交数据
    postEditdUrl(data) {
      api.editDeviceApi(data).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.cancelModal() // 关闭弹框
            this.$emit('refresh', true)
          }, 20)
        }
      })
      this.loading = false
    },

    // 获取角色列表
    getUnitList() {
      api.selectOutleApi().then(response => {
        if (response.data.code === 0) {
          this.unitOptions = response.data.data
        }
      })
    },

    // 获取设备组数据
    getDeviceGrooupList() {
      api.selectDeviceGrooupApi().then(response => {
        if (response.data.code === 0) {
          this.groupOptions = response.data.data
        }
      })
    },

    // 获取选择商家列表
    getSellerList() {
      var postData = {
        role_type: 3
      }
      api.adminSelectApi(postData).then(response => {
        if (response.data.code === 0) {
          this.sellerOptions = response.data.data
        }
      })
    }
  },
  // 监事事件
  watch: {
    propsData(v) {
      if (typeof (v.id) !== 'undefined') {
        this.selectOutlet = v.select_unit
        if (v.unit_id !== '0') {
          this.agent_unit = '1'
        } else if (v.unit_id === '0' && v.agent_id !== '0') {
          this.agent_unit = '2'
        }
      }
    }
  }
}
</script>